<template>
  <div class="q_table_css">
    <!-- 上面单位的横排 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="单位所在地区" class="top_css">
        <el-input v-model="formInline.area" disabled></el-input>
      </el-form-item>
      <el-form-item label="所在单位" class="top_css">
        <el-input v-model="formInline.unit" disabled></el-input>
      </el-form-item>
      <el-form-item label="所属行业" class="top_css">
        <el-input v-model="formInline.industry" disabled></el-input>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-container>
      <el-table :data="tableData" style="width: 100%; border: 1px solid #eee;">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="technicalSeries" label="现专业技术系列" width="210"></el-table-column>
        <el-table-column prop="professionalQualification" label="现资格专业" width="200"></el-table-column>
        <el-table-column prop="postQualification" label="职务任职资格" width="200"></el-table-column>
        <el-table-column prop="qualificationTime" label="获取资格时间 " width="130"></el-table-column>
        <el-table-column prop="appointmentDate" label=" 聘任日期 " width="130"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" plain size="small" class="btn_css">查看附件</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-container>
    <!-- 分页 -->
    <!-- <div class="block page_css">
      <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
    </div>-->
    <!-- 单位变更按钮 -->
    <el-form class="q_table_css2">
      <el-form-item>
        <el-button plain @click="onSubmit" class="q_btn_1">单位变更</el-button>
        <el-button plain @click="onSubmit2" class="q_btn_1">变更记录</el-button>
        <!-- <el-button>取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      staffId: 7,
      index: "3",
      formInline: {
        area: "",
        unit: "",
        industry: ""
      },
      // tableData: []
      tableData: [
        {
          professionalQualification: "",
          postQualification: "",
          technicalSeries: "",
          qualificationTime: "",
          appointmentDate: ""
        }
      ]
    };
  },
  methods: {
    getCon() {
      this.$axios({
        url: "/qualification/allList",
        method: "post",
        data: {
          staffId: this.staffId
        }
      }).then(res => {
        console.log(res.data.data[0]);
        this.tableData[0].professionalQualification = res.data.data[0].professionalQualification;
        this.tableData[0].postQualification = res.data.data[0].postQualification;
        this.tableData[0].appointmentDate = res.data.data[0].appointmentDate;
        this.tableData[0].technicalSeries = res.data.data[0].technicalSeries;
        this.tableData[0].qualificationTime = res.data.data[0].qualificationTime;
        this.formInline.area = res.data.data[0].staff.area;
        this.formInline.unit = res.data.data[0].staff.unit;
        this.formInline.industry = res.data.data[0].staff.industry;
      });
    },
    handleClick(row) {
      console.log(row);
    },
    onSubmit() {
      // this.$emit('ev', this.index);
      this.$router.push("/personalinformation/newplaceinformation");
    },
    onSubmit2() {
      this.$router.push("/personalinformation/changerecord");
    }
  },
  mounted() {
    this.getCon();
  }
};
</script>
<style scoped lang="less">
.page_css {
  margin: 10px;
  text-align: right;
}
.el-table {
  font-size: 13px;
}
.btn_css {
  background-color: #f7f7f7;
  border: 1px solid #eee;
  width: 150px;
  height: 40px;
  text-align: center;
}
.top_css {
  margin-left: 30px;
  margin-right: 50px;
}
.q_table_css {
  padding: 20px;
  text-align: center;
}
/* .q_table_css2 {
    margin-top: 80px;
} */
.q_btn_1 {
  background-color: #f7f7f7;
  margin-top: 80px;
  margin-left: 30px;
  width: 160px;
  padding: 10px 20px;
}
</style>